<template>
  <div style="margin: 10px">
    <Screen @query="query" />
    <Tabel
      :columns="columns"
      :table-data="webPageList"
      :loading="loading"
      :page-index="queryForm"
      @handleCurrent="handleCurrent"
    >
      <el-table-column slot="handleState" label="是否启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#02538C"
            inactive-color="#B9B9B9"
            @change="changeSwitch(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        slot="handleColumn"
        label="操作"
        width="200"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="webPageListEdit(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </Tabel>
  </div>
</template>
<script>
const Screen = () => import('./components/screen')
const Tabel = () => import('@/components/Table')
import { getWebPageList, updateStatus } from '@/api/webPage'
export default {
  name: 'Navigation',
  components: {
    Screen,
    Tabel
  },
  data() {
    return {
      loading: false, // 加载
      columns: [
        {
          prop: 'id',
          label: 'id'
        },
        {
          prop: 'webPageName',
          label: '页面名称'
        }
      ],
      webPageList: [], // 分类列表
      queryForm: {
        size: 20,
        current: 1
      }
    }
  },
  created() {
    this.query()
  },
  methods: {
    query() {
      getWebPageList(this.queryForm).then((res) => {
        this.webPageList = res
      })
    },
    // 导航
    webPageListEdit() {},
    // 选中行
    handleCurrent() {},
    // 是否启用
    changeSwitch(row) {
      updateStatus({
        id: row.id,
        status: row.status
      }).then((res) => {
        // 判断是否设置成功
        if (res.code === 200) {
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>
<style scoped>
</style>
